<template>
  <div>
    <div class="timeGroup">
      <a-radio-group
        button-style="solid"
        v-model:value="timeSelected"
        @change="timeOptionChange"
      >
        <a-radio-button
          v-for="(item, index) in timeOptionSchema"
          :key="index"
          :value="item.key"
        >
          {{ item.label }}</a-radio-button
        >
      </a-radio-group>
      <a-range-picker
        format="YYYY-MM-DD HH:mm"
        v-model:value="timeValue"
        @change="timePickerChange"
      >
      </a-range-picker>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { millis2str } from "/@/utils/dateUtil";
import { timeOptionSchema } from "./index.data";
import props from "./props";
import moment from "moment";
export default defineComponent({
  emits: ["register"],
  props: props,
  setup(props, { emit }) {
    const { index }: any = props;
    const timeSelected = ref();
    const timeValue = ref(moment(""));
    const timeOptionChange = (e: any) => {
      getTimes(e.target.value);
    };
    getTimes(index);
    function getTimes(index: number) {
      timeSelected.value = index;
      const currentTimeMillis = new Date().getTime();
      let startTimeMillis: number = 0;
      switch (index) {
        case 0:
          startTimeMillis = currentTimeMillis - 30 * 60 * 1000;
          setInputTimes(startTimeMillis, currentTimeMillis);
          break;
        case 1:
          startTimeMillis = currentTimeMillis - 60 * 60 * 1000;
          setInputTimes(startTimeMillis, currentTimeMillis);
          break;
        case 2:
          startTimeMillis = currentTimeMillis - 24 * 60 * 60 * 1000;
          setInputTimes(startTimeMillis, currentTimeMillis);
          break;
        case 3:
          startTimeMillis = currentTimeMillis - 7 * 24 * 60 * 60 * 1000;
          setInputTimes(startTimeMillis, currentTimeMillis);
          break;
        default:
          return false;
      }
    }

    function setInputTimes(start: number, end: number) {
      let timeArr: any = [];
      timeArr.push(moment(millis2str(start)));
      timeArr.push(moment(millis2str(end)));
      timeValue.value = timeArr;
    }
    const timePickerChange = (_, value) => {
      timeValue.value = value;
    };
    function getInputTimes() {
      let timeArr: any = [];
      timeArr.push(new Date(timeValue.value[0]).getTime());
      timeArr.push(new Date(timeValue.value[1]).getTime());
      return timeArr;
    }
    emit("register", { getValue, setProps });

    function setProps(val: any) {
      getTimes(val.index);
    }
    function getValue() {
      return getInputTimes();
    }
    return {
      getInputTimes,
      timeOptionChange,
      timeSelected,
      timeValue,
      timeOptionSchema,
      timePickerChange,
    };
  },
});
</script>
<style scoped>
::v-deep(.ant-calendar-picker .ant-input) {
  border-radius: 0;
}
::v-deep(.ant-radio-button-wrapper) {
  border-right: none;
  border-radius: 0;
}
</style>
